<template>
  <div class="user-info-panel">
    <div class="user-info">
      <div class="avatar-placeholder"><i class="el-icon-user-solid"></i></div>
      <div class="nickname">{{ config.defaultNickname || '未登录' }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfoPreview",
  props: ['config']
}
</script>

<style scoped>
.user-info-panel { background: linear-gradient(180deg, #5e8dff, #62a1ff); padding: 20px 15px; color: white; }
.user-info { display: flex; align-items: center; }
.avatar-placeholder { width: 60px; height: 60px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; font-size: 30px; margin-right: 15px; }
.nickname { font-size: 18px; font-weight: bold; }
</style>
